﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>客户端分段专题图</title>
    <!--引入当前页面样式表-->
    <link href="./style.css" rel="stylesheet" type="text/css"/>
    <script src="./static/libs/include-openlayers-local.js"></script>
    <style>
        body {
            height: 700px;
        }

        .legendItemHeader,
        .legendItemValue {
            width: 200px;
            height: 18px;
            font-size: 14px;
        }

        .panel-primary {
            border-color: #337ab7;
        }

        .panel {
            margin-bottom: 20px;
            background-color: #fff;
            border: 1px solid transparent;
            border-radius: 4px;
            -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
            box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
        }

        .panel-title {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 16px;
            color: inherit;
        }

        .text-center {
            text-align: center;
        }

        .panel-heading {
            padding: 5px 15px;
            border-bottom: 1px solid transparent;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            background-color: #337ab7;
            border-color: #337ab7;
        }

        .panel-body {
            padding: 10px;
            background-color: #f0ffff;
        }
    </style>
    <script type="text/javascript">
        //使用严格模式
        "use strict";
        //定义地图文档图层和地图、专题图图层
        var mapDocLayer, map, themeSource, themeLayer;
        var { protocol, ip, port } = window.webclient;
        var ip = `${ip}`;
        var port = `${port}`;
        var docName = 'Hubei4326';

        /** 初始化地图显示*/
        function init() {
            var center = [(108.34341 + 116.150939561213) / 2, (29.0125822276524 + 33.2932017737021) / 2];
            var extent = [-180, -90, 180, 90];

            //投影坐标系
            var projection = new ol.proj.Projection({units: 'degrees', extent: extent});
            map = new ol.Map({
                target: 'ol_map',
                //要添加地图容器的DIV的ID
                //layers: [mapDocLayer],
                //地图容器中要加载的图层列表
                view: new ol.View({
                    center: center,
                    projection: projection,
                    zoom: 7
                })
            });
            //地图的显示名称
            var name = "MapGIS IGS MapDocLayer";
            var mapDocLayer = new Zondy.Map.MapDocTileLayer(name, docName, {
                //IP地址
                ip: ip,
                //端口号
                port: port
            });
            map.addLayer(mapDocLayer);
        }

        /** 添加专题图*/
        function createThemeBtn() {
            startPressBar();
            var options = {isHoverAble: true};
            options.map = map;

            options.style = new Zondy.Map.ThemeStyle({
                shadowBlur: 16,
                shadowColor: "#000000",
                fillColor: "#FFFFFF"
            });

            // hover 高亮样式
            options.highlightStyle = new Zondy.Map.ThemeStyle({
                stroke: true,
                strokeWidth: 4,
                strokeColor: 'blue',
                fillColor: "#00EEEE",
                fillOpacity: 0.8
            });

            // 用于专题图的属性字段名称
            options.themeField = "GDP2016";
            // 风格数组，设定值对应的样式
            options.styleGroups = [{
                start: 0,
                end: 100,
                style: {
                    color: '#0000FF'
                }
            }, {
                start: 100,
                end: 150,
                style: {
                    color: '#238E23'
                }
            }, {
                start: 150,
                end: 200,
                style: {
                    color: '#8E236B'
                }
            }, {
                start: 200,
                end: 400,
                style: {
                    color: '#00FF7F'
                }
            }, {
                start: 400,
                end: 1323,
                style: {
                    color: '#2F4F2F'
                }
            }];
            themeSource = new Zondy.Source.RangeThemeSource("ThemeLayer", options);
            addThemeFeatures(querySuccess);
            //专题图层 mousemove 事件
            themeSource.on('mousemove', highLightLayer);

            var pointerInteraction = new ol.interaction.Pointer({
                handleMoveEvent: function (event) {
                    themeSource.fire('mousemove', event);
                }
            });
            map.addInteraction(pointerInteraction);
            themeLayer = new ol.layer.Image({
                source: themeSource
            });
            themeLayer.setOpacity(0.8);
            map.addLayer(themeLayer);
        }

        /** 添加专题图要素*/
        function addThemeFeatures(onsuccess) {
            var queryStruct = new Zondy.Service.QueryFeatureStruct();
            //是否包含几何图形信息
            queryStruct.IncludeGeometry = true;
            //是否包含属性信息
            queryStruct.IncludeAttribute = true;
            //是否包含图形显示参数
            queryStruct.IncludeWebGraphic = false;
            //实例化查询参数对象
            var queryParam = new Zondy.Service.QueryParameter({
                resultFormat: "json",
                struct: queryStruct,
                where: '1>0'
            });
            //设置查询分页号
            queryParam.pageIndex = 0;
            //设置查询要素数目
            queryParam.recordNumber = 10000;
            //实例化地图文档查询服务对象
            var queryService = new Zondy.Service.QueryDocFeature(queryParam, docName, 1, {
                ip: ip,
                port: port,
                requestType: 'POST'
            });

            //执行查询操作，querySuccess为查询回调函数
            queryService.query(onsuccess, null);
        }

        /** 要素查询成功回调函数*/
        function querySuccess(data) {
            if (data != null) {
                //客户端专题图：添加数据
                themeSource.addFeatures(data);
                document.getElementById("legendview").style.display = "block";
            }
            stopPressBar();
        }

        /** 高亮设置*/
        function highLightLayer(e) {
            if (e.target && e.target.refDataID) {
                document.getElementById("infoBox").style.display = "block";
                var fid = e.target.refDataID;
                var fea = themeLayer.getSource().getFeatureById(fid);
                if (fea) {
                    document.getElementById("infoContent").innerHTML = "";
                    document.getElementById("infoContent").innerHTML += "FID: " + fea.attributes.FID + "<br/>";
                    document.getElementById("infoContent").innerHTML += '行政区: ' +
                        fea.attributes['NAME'] + "<br/>";
                    document.getElementById("infoContent").innerHTML += 'GDP2016：' +
                        parseInt(fea.attributes['GDP2016']) + "<br/>";
                }
            } else {
                document.getElementById("infoContent").innerHTML = "";
                document.getElementById("infoBox").style.display = "none";
            }
        }


        /** 删除专题图*/
        function deleteTheme() {
            if (map != null && themeLayer != null) {
                themeLayer.getSource().un('mousemove', highLightLayer);
                map.removeLayer(themeLayer);
                document.getElementById("legendview").style.display = "none";
                document.getElementById("infoBox").style.display = "none";

            }
        }

        /** 开始进度条动画*/
        function startPressBar() {
            document.getElementById('preview').style.display = "";
        }

        /** 停止进度条动画*/
        function stopPressBar() {
            document.getElementById('preview').style.display = "none";
        }
    </script>
</head>
<body style="width: 100%; height:100%; position:absolute;" onload="init();">
<div id="preview" style="display: none; text-align: center; padding-top: 250px; font-weight: bold">
    <img src="./static/assets/graphic-image/39-1.gif" alt=''/><br/>
    <br/>
    <span>正在操作，请稍候</span>
</div>
<div class="ToolLib" style="position:absolute;">
    <input type="button" class="ButtonLib" id="createThemeBtn" value="添加专题图" onclick="createThemeBtn()"/>
    <input type="button" class="ButtonLib" id="deleteThemeBtn" value="删除专题图" onclick="deleteTheme()"/>
</div>
<div id="ol_map" style="width: 100%; height:95%; position:absolute;top:34px;background-color:#d8d4d4;">
</div>
<div id="infoBox" class="panel panel-primary infoPane"
     style="width:272px;right: 10px;bottom: 230px;position: absolute;fontSize:14px;display: none;">
    <div class="panel-heading">
        <h5 class='panel-title text-center'>属性</h5>
    </div>
    <div id="infoContent" class="panel-body content">
    </div>
</div>
<div id='legendview' class="panel panel-primary legend" style="width: 272px;right: 10px;bottom:0px;position: absolute;display: none;">
    <div class="panel-heading">
        <h5 class="panel-title text-center">图例</h5>
    </div>
    <div class="panel-body text-center">
        <table>
            <tbody>
            <tr>
                <td class="legendItemHeader">GDP2016</td>
                <td class="legendItemValue">颜色</td>
            </tr>
            <tr>
                <td class="legendItemHeader">0 - 100</td>
                <td class="legendItemValue" style="background: #0000FF"></td>
            </tr>
            <tr>
                <td class="legendItemHeader">100-150</td>
                <td class="legendItemValue" style="background: #238E23"></td>
            </tr>
            <tr>
                <td class="legendItemHeader">150-200</td>
                <td class="legendItemValue" style="background: #8E236B"></td>
            </tr>
            <tr>
                <td class="legendItemHeader">200-400</td>
                <td class="legendItemValue" style="background: #00FF7F"></td>
            </tr>
            <tr>
                <td class="legendItemHeader">400-以上</td>
                <td class="legendItemValue" style="background: #2F4F2F"></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>
